<template>
  <el-card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="字段信息" @click="updateActivityName('basic')" name="columnInfo">
        <!-- 添加一行数据 -->
        <el-button
          type="primary"
          class="buttonAdd"
          icon="el-icon-plus"
          @click="addRow"
        >添加一行</el-button>
        <el-button type="text" @click="dialogFormVisible = true">编辑表信息</el-button>
        <el-dialog title="表信息" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="表名称" prop="tableName">
              <el-input placeholder="请输入表名称" v-model="tables.tableName" />
            </el-form-item>
            <el-form-item label="表描述" prop="tableComment">
              <el-input placeholder="请输入表描述" v-model="tables.tableComment" />
            </el-form-item>
            <el-form-item label="表前缀" prop="tablePrefix">
              <el-input placeholder="请输入表前缀" v-model="tables.tablePrefix" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
        <el-table ref="dragTable" :data="tables.tableColumn" row-key="columnId" :max-height="tableHeight">
          <el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" />
          <el-table-column
            label="字段列名"
            prop="columnName"
            min-width="10%"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnName"></el-input>
            </template>
          </el-table-column>>
          <el-table-column label="字段类型" min-width="11%">
            <template slot-scope="scope">
              <el-select v-model="scope.row.columnType" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="长度" min-width="11%">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnLength"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="小数点" min-width="11%">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnPoint"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="列是否可为空" min-width="5%">
            <template slot-scope="scope">
              <el-checkbox true-label="true" false-label="false" v-model="scope.row.columnIsNull"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="列是否为主键" min-width="5%">
            <template slot-scope="scope">
              <el-checkbox true-label="1" false-label="0" v-model="scope.row.columnIsPrimary"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="列描述" min-width="11%">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnComment"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button type="primary" @click="createTable()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>

import {createTable} from "@/api/tool/gen";
import tab from "@/plugins/tab";

export default {
  name: "CreateTable",
  data() {
    return {
      // 选中选项卡的 name
      activeName: "columnInfo",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      dialogFormVisible: false,
      formLabelWidth: '120px',

      options: [{
        value: 'varchar',
        label: 'varchar'
      }, {
        value: 'tinyint',
        label: 'tinyint'
      }, {
        value: 'int',
        label: 'int'
      }, {
        value: 'float',
        label: 'float'
      }, {
        value: 'double',
        label: 'double'
      }, {
          value: 'datetime',
          label: 'datetime'
        },{
        value: 'decimal',
        label: 'decimal'
      },{
        value: 'bigint',
        label: 'bigint'
      },{
        value: 'text',
        label: 'text'
      },],
      value: '',
      // 表信息
      tables: {
        tableName:null,
        tableComment:null,
        tablePrefix:null,
        tableColumn:[
          {
            columnName:null,
            columnComment:null,
            columnType:null,
            columnLength:null,
            columnPoint:null,
            columnIsNull:false,
            columnIsPrimary:false
          }
        ],
      },
    };
  },
  methods: {
    createTable(){
        createTable(this.tables).then(response => {
          this.reset()
        });
      },
    reset(){
      const table={
        tableName:null,
          tableComment:null,
          tablePrefix:null,
          tableColumn:[
          {
            columnName:null,
            columnComment:null,
            columnType:null,
            columnLength:null,
            columnPoint:null,
            columnIsNull:false,
            columnIsPrimary:false
          }
        ],
      }
      this.tables=table;
    },
    addRow() {
      const newRow={
        columnName:null,
        columnComment:null,
        columnType:null,
        columnLength:null,
        columnPoint:null,
        columnIsNull:false,
        columnIsPrimary:false
      }
      // 添加一行数据
      this.tables.tableColumn.push(newRow);
      },
  }
};
</script>
